<template>
  <div class="banner" v-if="form">
    <el-image :src="form.photo"></el-image>
  </div>
  <div v-if="form" class="container flex flex-col w-[1280px] m-auto">
    <el-breadcrumb class="my-5" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ form.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="w-7xl m-auto bg-gray-50">
        <div class="title text-3xl text-center py-10">{{ form.name }}</div>
        <div class="p-4 leading-7" v-html="form.content">
        </div>
    </div>
  </div>
  <div v-if="!form">
    <el-empty description="404 页面不存在"></el-empty>
  </div>
</template>
<script setup lang="ts">
import type {Design} from "~/api/cms/design/model";
import type {ApiResult} from "~/api";
import {useRequest} from "~/composables/useRequest";

const route = useRoute();
const { query, params } = route;
const { custom: pageName} = params;

// 页面信息
const form = ref<Design | any>();

// 请求数据
const { data: design } = await useRequest<ApiResult<Design[]>>('/cms/design', {params: {
  path: `/${pageName}`
  }})

if (design.value) {
  design.value?.data?.map((d,i) => {
    if(i == 0){
      form.value = d;
      console.log(d.name)
      useHead({
        title: `${d.name} 网宿软件`,
        meta: [{ name: "keywords", content: "Nuxt Vue SSR Typescript" }],
        bodyAttrs: {
          class: "page-container",
        },
        script: [
          {
            children: "console.log('Hello World')",
          },
        ],
      });
    }
  })
}
</script>

<style scoped lang="scss">

</style>
